<!--
 * @Description: 用户管理
 * @Author: wangwangwang
 * @Date: 2020-06-29 11:18:28
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-03-26 14:52:21
-->
<template>
  <div class="pages_content dictionary-container">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <div class="header_right" @click="showCardNav = !showCardNav">
          <div class="title">搜索</div>
          <div>
            <transition name="from"></transition>
            <span v-show="!showCardNav">
              <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
            </span>
            <transition name="to"></transition>
            <span v-show="showCardNav">
              <i style="margin-right: 5px" class="el-icon-arrow-up"></i>
            </span>
          </div>
        </div>
        <div v-show="showCardNav" class="hr"></div>
        <el-collapse-transition>
          <div v-show="showCardNav" class="search">
            <div style="height: 18px; width: 100%"></div>
            <div>
              <el-form ref="form" :inline="true" :model="form">
                <el-form-item label="名称" prop="name">
                  <el-input v-model="form.name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="组织" prop="organizationShowInfo">
                  <el-input v-model="form.organizationShowInfo" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="岗位" prop="stationName">
                  <el-input v-model="form.stationName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button icon="el-icon-search" size="medium" class="bottom_all" @click="page=1,initData()">查 询</el-button>
                  <el-button size="medium" class="bottom_all_two" @click="resetData()">重 置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-collapse-transition>
        <div class="hr"></div>
        <div class="card">
          <div class="card_nav">
            <div>
              <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='TIANJIA'))!==-1" size="small" class="bottom_all" style="margin-left: 0" @click="add()">
                <i class="icon iconfont iconicon_button_add" style="font-size: 12px"></i>
                添加
              </el-button>
              <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='RIYONG'))!==-1" size="small" class="bottom_three" @click="updateType(1)">
                <i class="icon iconfont iconicon_button_startuse" style="font-size: 12px"></i>
                启用
              </el-button>
              <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='JINYONG'))!==-1" size="small" class="bottom_four" @click="updateType(2)">
                <i class="icon iconfont iconicon_button_disable1" style="font-size: 12px"></i>
                禁用
              </el-button>
              <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='SHANCHU'))!==-1" size="small" class="bottom_two" @click="updateType(3)">
                <i class="icon iconfont iconicon_button_delete" style="font-size: 12px"></i>
                删除
              </el-button>
              <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='DAORU'))!==-1" size="small" class="botton_five" @click="importUser">导入用户</el-button>
              <el-button size="small" class="botton_five" @click="resetPassword">重置密码</el-button>
            </div>
            <div>
              <el-link v-if="ButtonList.findIndex(res=>(res.buttonValue=='BAOCUNPXH'))!==-1" :underline="false" @click="updateSortNum()">
                <span class="el-icon--left">
                  <i class="iconfont iconicon_button_sort1"></i>
                </span>
                保持排序号
              </el-link>
              <el-dropdown :hide-on-click="false" trigger="click" style="margin: 0 20px">
                <el-link :underline="false">
                  <span class="el-icon--left">
                    <i class="iconfont iconicon_button_filtrate"></i>
                  </span>
                  筛选
                </el-link>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(item, index) in tableColumns" :key="index">
                    <el-checkbox v-model="item.status">{{
                      item.label
                      }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-link v-if="ButtonList.findIndex(res=>(res.buttonValue=='DAOCHU'))!==-1" :underline="false" @click="$Download(DownloadURL, form);">
                <span class="el-icon--left">
                  <i class="iconfont iconicon_button_export1"></i>
                </span>
                导出
              </el-link>
            </div>
          </div>
          <div class="card_info" :style="style">
            <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
              <el-table-column align="center" type="selection"></el-table-column>
              <template v-for="(item, index) in tableColumns">
                <el-table-column v-if="item.status" :key="index" :label="item.label" align="center" :width="item.width" :fixed=" item.label =='操作'?'right':false">
                  <template slot-scope="scope">
                    <span v-if="item.label == '性别'">{{
                      scope.row.sex == 0
                      ? "未知"
                      : scope.row.sex == 1
                      ? "男"
                      : "女"
                      }}</span>
                    <span v-if="item.label == '登录方式'">{{
                      scope.row.loginType == 1 ? "用户名" : scope.row.loginType == 2 ? "手机号" : "手机号/用户名"
                      }}</span>
                    <span v-if="item.label == '是否支持创建子账号'">{{
                      scope.row.createChindAccount == 0 ? "不支持" : "支持"
                      }}</span>
                    <span v-if="scope.row.enable == 0 && item.label == '状态'" style="color: #969799">禁用</span>
                    <span v-if="scope.row.enable == 1 && item.label == '状态'" style="color: #00a754">启用</span>
                    <el-button v-if="item.label == '操作'&&ButtonList.findIndex(res=>(res.buttonValue=='XIUGAI'))!==-1" class="bottom_one" size="mini" @click="update(scope.row)">

                      修改
                    </el-button>
                    <span v-if="
                        item.label !== '操作' &&
                        item.label !== '状态' &&
                        item.label !== '性别' &&
                        item.label !== '登录方式' &&
                        item.label !== '是否支持创建子账号'
                      ">{{ scope.row[item.prop] }}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
          <div class="card_bottom">
            <div class="card_bottom_left">
              <div class="top_page_totle">总共{{ total }}条</div>
              <el-pagination :page-size="pageSize" layout="prev,pager,sizes,next,jumper" :total="total" :current-page.sync="page" @size-change="sizeChange" @current-change="initData()"></el-pagination>
            </div>
            <div>
              <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="initData()">刷新</el-button>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    <!-- 添加 -->
    <el-dialog v-dialogDrag :visible.sync="dialogVisible" width="800px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">{{ dialogtitle }}</span>
      <el-form ref="dialogForm" :model="dialogForm" :rules="rules" :inline="true" label-width="150px">
        <el-form-item prop="name">
          <template slot="label">
            <span style="color: #ff0000">姓名</span>
          </template>
          <el-input v-model="dialogForm.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNum">
          <template slot="label">
            <span style="color: #ff0000">手机号</span>
          </template>
          <el-input v-model="dialogForm.phoneNum" type="Number" placeholder="请输入" oninput="if(value.length > 11)value = value.slice(0, 11)"></el-input>
        </el-form-item>
        <el-form-item label="登录账号" prop="loginAccount">
          <template slot="label">
            <span style="color: #ff0000">登录账号</span>
          </template>
          <el-input v-model.trim="dialogForm.loginAccount" placeholder="请输入" :disabled="dialogForm.id!=undefined"></el-input>
        </el-form-item>
        <el-form-item prop="organizationId">
          <template slot="label">
            <span style="color: #ff0000">所属组织</span>
          </template>
          <span style="cursor:pointer;" @click.stop="showVisible">{{dialogForm.organizationIdarr}}</span>
        </el-form-item>
        <el-form-item prop="userTypeId">
          <template slot="label">
            <span style="color: #ff0000">用户类型</span>
          </template>
          <el-select v-model="dialogForm.userTypeId" placeholder="请选择">
            <el-option v-for="(item, index) in usertypesoptions" :key="index" :label="item.itemName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="岗位">
          <el-select v-model="dialogForm.stationId" filterable placeholder="请选择" @change="getrankoptions(dialogForm.stationId),dialogForm.rankId=''">
            <el-option v-for="(item, index) in stationoptions" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职务">
          <el-select v-model="dialogForm.postId" placeholder="请选择">
            <el-option v-for="(item, index) in positionoptions" :key="index" :label="item.itemName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="dialogForm.sex" placeholder="请选择">
            <el-option label="未知" :value="0"></el-option>
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份证" prop="idCard">
          <el-input v-model="dialogForm.idCard" type="text" maxlength="18" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="职级">
          <el-select v-model="dialogForm.rankId" placeholder="请选择">
            <el-option v-for="(item, index) in rankoptions" :key="index" :label="item.targetName" :value="item.targetId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="登录方式" prop="loginType">
          <el-select v-model="dialogForm.loginType" multiple placeholder="请选择">
            <el-option label="用户名" :value="1"></el-option>
            <el-option label="手机号" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="NC编号">
          <el-input v-model="dialogForm.ncNo" placeholder="请输入" @input="changecode('ncNo')"></el-input>
        </el-form-item>
        <el-form-item label="排序号">
          <el-input v-model="dialogForm.sortNum" type='number' placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="是否支持创建子账号" prop="createChindAccount">
          <el-select v-model="dialogForm.createChindAccount">
            <el-option label="支持" :value="1"></el-option>
            <el-option label="不支持" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <div>
          <el-form-item label="家庭住址">
            <el-input v-model="dialogForm.address" placeholder="请输入"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="状态">
          <el-radio-group v-model="dialogForm.enable">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="resefrom">取 消</el-button>
        <el-button class="bottom_all" @click="sureSubmit()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 导入 -->
    <el-dialog v-dialogDrag :visible.sync="exportDialog" width="680px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">导入用户数据</span>
      <div v-loading="loading" element-loading-text="数据解析中..." element-loading-background="rgba(0, 0, 0, 0.8)" class="dialoginfo" style="text-align: center;">
        <el-upload class="upload-demo" :on-success="fileSuccess" :before-upload="filebefore" :show-file-list="false" drag action="/base/system/user/importUserList" name="file" :headers="upheader">
          <i slot="trigger" class="el-icon-upload"></i>
          <div slot="trigger" class="el-upload__text">
            将文件拖到此处，或
            <em>点击选取文件</em>
          </div>
        </el-upload>
        <div style="padding-top: 10px;">
          <el-button class="bottom_all" style="margin-left: 0px;" @click="importSubmit()">下载模板</el-button>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="exportDialog = false">关 闭</el-button>
      </span>
    </el-dialog>
    <Organization ref="organization" :default="dialogForm.organizationId" :visible="organVisible" :dataSource="orangeoptions" title="选择组织" :showArr="allOrganizationArr" @handleSure="handleSure" @handleClose="organVisible=false" />
  </div>
</template>
<script>
import Organization from '@/components/organization';
import { getDicType } from '@/api/common';
import {
  queryPage,
  saveOrUpdate,
  updateOrDelete,
  queryjobPage,
  updateSortNum,
  reset_password,
  Download,
  exportTemplate,
  get_list
} from '@/api/basedata/user'
import { queryPage as organgequeryPage } from '@/api/basedata/organization.js';
import breaDcrumb from '@/components/breadcrumb';
import { mapGetters } from 'vuex';
import { transData, formatOrganization } from '@/utils/utils';
import { codeReg, cardReg, sortReg } from '@/common/RegExp.js';
import {
  getUserInfo,
  getToken,
  getUserId
} from '@/utils/auth';
export default {
  components: {
    breaDcrumb,
    Organization
  },
  data() {
    var landlinePhone = (rule, value, callback) => {
      if (!this.$regExp.landlinePhoneReg(value)) {
        return callback(new Error('电话格式错误！'));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (cardReg(value) || value == '') {
        callback()
      } else {
        callback(new Error('请输入正确的身份证号码!'))
      }
    }
    var validatePass1 = (rule, value, callback) => {
      if (sortReg(value)) {
        callback()
      } else {
        callback(new Error('请输正整数序号!'))
      }
    }
    return {
      userInfo: '',
      upheader: {},
      loading: false,
      organVisible: false,
      dataSource: [],
      DownloadURL: Download,
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        organizationId: [
          { required: true, message: '请选择组织', trigger: 'change' }
        ],
        stationId: [{ required: true, message: '请选择岗位', trigger: 'change' }],
        postId: [{ required: true, message: '请选择职级', trigger: 'change' }],
        rankId: [{ required: true, message: '请选择职务', trigger: 'change' }],
        phoneNum: [{ validator: landlinePhone, trigger: 'change' }],
        idCard: [
          {
            validator: validatePass,
            trigger: 'blur'
          }
        ],
        ncNo: [{ required: true, message: '请输入NC编号', trigger: 'blur' }],
        loginAccount: [
          { required: true, message: '请输入登录账号', trigger: 'blur' }
        ],
        loginType: [
          { required: true, message: '请选择登录方式', trigger: 'change' }
        ],
        userTypeId: [
          { required: true, message: '请选择用户类型', trigger: 'change' }
        ],
        sortNum: [{ required: true, message: '请输入排序号', trigger: 'blur' },
        {
          validator: validatePass1,
          trigger: 'blur'
        }
        ],
        address: [{ required: true, message: '请输入用家庭住址', trigger: 'blur' }]
      },
      stationoptions: [],
      orangeoptions: [],
      /* 添加修改弹窗*/
      dialogVisible: false,
      dialogtitle: '添加用户',
      /* 判断收起展开*/
      showCardNav: true,
      /* 列表展示*/
      tableColumns: [
        { label: '名称', width: '120', prop: 'name', status: true },
        {
          label: '组织',
          width: '300',
          prop: 'organizationShowInfo',
          status: true
        },
        { label: '职务', width: 'auto', prop: 'postName', status: true },
        { label: '岗位', width: '160', prop: 'stationName', status: true },
        { label: '职级', width: '140', prop: 'rankName', status: true },
        { label: '性别', width: 'auto', prop: 'sex', status: true },
        { label: '手机号', width: '120', prop: 'phoneNum', status: true },
        { label: '身份证', width: '240', prop: 'idCard', status: true },
        { label: '家庭住址', width: '240', prop: 'address', status: true },
        {
          label: '登录账号',
          width: '160',
          prop: 'loginAccount',
          status: true
        },
        { label: '登录方式', width: '140', prop: 'loginType', status: true },
        {
          label: '是否支持创建子账号',
          width: '180',
          prop: 'createChindAccount',
          status: true
        },
        {
          label: '用户类型',
          width: '160',
          prop: 'userTypeName',
          status: true
        },
        { label: '排序号', width: '120', prop: 'sortNum', status: true },
        { label: '状态', width: 'auto', prop: 'enable', status: true },
        { label: '操作', width: 120, prop: 'options', status: true }
      ],
      /* 列表选中的数据集*/
      SelectionTableData: [],
      tableData: [],
      total: 0,
      dialogTable: [],
      page: 1,
      pageSize: 10,
      dialogForm: {
        userEentrance: 'entrance_manager',
        organizationIdarr: '请选择组织',
        companyId: '',
        name: '',
        organizationId: '',
        stationId: '',
        postId: '',
        rankId: '',
        sex: 0,
        phoneNum: '',
        idCard: '',
        ncNo: '',
        loginAccount: '',
        loginType: [],
        createChindAccount: 0,
        userTypeId: '',
        sortNum: '',
        enable: 1,
        address: ''
      },
      form: {
        name: '',
        userEentrance: 'entrance_manager',
        organizationShowInfo: '',
        stationName: '',
      },
      sortIds: [],
      /* 职务*/
      positionoptions: [],
      /* 职级*/
      rankoptions: [],
      /* 用户类型*/
      usertypesoptions: [],
      allOrgangeData: [],
      ButtonList: [],
      exportDialog: false,
      allOrganizationArr: []//选中的回显数据
    }
  },
  computed: {
    ...mapGetters({
      screenWidth: 'getscreenWidth',
      screenHeight: 'getscreenHeight',
      Collapse: 'getsCollapse'
    }),
    style() {
      let num = 0
      if (this.Collapse) {
        num = this.screenWidth - 124
      } else {
        num = this.screenWidth - 220
      }
      return 'width:' + num + 'px;'
    }
  },
  created() {
    this.userInfo = getUserInfo()
    this.ButtonList = this.$ButtonList()
    getDicType({ code: 'position' }).then((res) => {
      this.positionoptions = res.data.items
    })
    getDicType({ code: 'usertypes' }).then((res) => {
      this.usertypesoptions = res.data.items
    })
    this.upheader = {
      'access-token': getToken(),
      'user-id': getUserId()
    }
    queryjobPage({ page: 1, pageSize: 10000, enable: 1 }).then((res) => {
      this.stationoptions = res.data.data
      console.log(JSON.parse(JSON.stringify(this.stationoptions)))
    })
    this.orangeoptions = []
    const params = {
      page: 1,
      pageSize: 10000000
    }
    organgequeryPage({ ...params, showEnable: 0 }).then((res) => {
      if (res.code === 1001) {
        res.data.data.forEach((a) => {
          a.label = a.name
          a.value = a.id
        })
        const { data } = res.data;
        this.allOrgangeData = data;
        this.orangeoptions = transData(
          data,
          'id',
          'parentId',
          'children',
          'parent_id'
        )
      }
    })
  },
  mounted() {
    this.initData()
  },
  methods: {
    handleSure(data) {
      this.organVisible = false;
      const allOrganization = formatOrganization(this.allOrgangeData, data[0].id);
      this.dialogForm.organizationId = allOrganization[allOrganization.length - 1].id;
      this.dialogForm.organizationIdarr = allOrganization.map(item => item.name).join('-');
      const copyData = JSON.parse(JSON.stringify(allOrganization));
      copyData.reverse();
      const company = copyData.find(item => item.typeId === '19da56b9e85648059e3cf1e7da497da4' || item.typeId === 'b8f9367217ab43f8924cd6c08a9ba300');
      if (company) {
        this.dialogForm.companyId = company.id;
        this.dialogForm.company = company.name;
      }
    },
    showVisible() {
      this.organVisible = true;
      if (this.allOrganizationArr.length > 0) {//选中的回显自定义颜色
        this.allOrganizationArr = this.allOrganizationArr.map(res => (res.id))
        console.log(this.allOrganizationArr);
      }
    },
    /**根据岗位获取职级*/
    async getrankoptions(id) {
      let { data } = await get_list({
        sourceId: id,
        type: "stations_rank"
      })
      this.rankoptions = data.list;
    },
    fileSuccess(res) {
      this.loading = false
      if (res.code == 1001) {
        this.$message({
          dangerouslyUseHTMLString: true,
          message: `本次导入数据成功${res.data.successNum}条，失败<span style="color:red">${res.data.failureNum}</span>条！！！`,
          type: 'success'
        });
        if (res.data.failureNum !== 0) {
          let text = res.data.errResult.map(res => (res.name)).join(',')
          this.$notify.error({
            title: '导入失败用户',
            message: text,
            duration: 0
          });
        }
        if (res.data.successNum !== 0) {
          this.initData()
        }
      } else {
        this.$message.error(res.codeMsg);
      }
    },
    filebefore(file) {
      this.loading = true
      const isJPG = file.type === 'application/vnd.ms-excel';
      if (!isJPG) {
        this.$message.error('数据上传必须是 xls 格式!');
        this.loading = false
      }
      return isJPG;
    },
    /**导入用户*/
    importUser() {
      this.exportDialog = true
    },
    /**下载模板*/
    importSubmit() {
      this.$Download(exportTemplate)
    },
    changecode(key) {
      this.dialogForm[key] = codeReg(this.dialogForm[key])
    },
    resefrom() {
      this.dialogVisible = false
    },
    resetPassword() {
      if (this.SelectionTableData.length == 0) {
        this.$message({
          message: '请先选择用户！！！',
          type: 'warning'
        })
        return
      }
      reset_password(this.SelectionTableData).then(res => {
        if (res.code == 1001) {
          this.$message({
            message: '密码重置成功',
            type: 'success'
          })
        }
      })
    },
    /* 更新排序号*/
    updateSortNum() {
      console.log(this.sortIds)
      updateSortNum(this.sortIds).then(() => {
        this.queryPage()
      })
    },
    initData() {
      const params = {
        ...this.form,
        page: this.page,
        pageSize: this.pageSize
      }
      queryPage(params).then((res) => {
        this.total = res.data.totalRows
        this.tableData = res.data.data
      })
    },
    sizeChange(value) {
      this.pageSize = value;
      this.initData();
    },
    resetData() {
      this.$refs.form.resetFields()
      this.initData()
    },
    add() {
      this.allOrganizationArr = []
      this.dialogVisible = true
      this.$data.dialogForm = this.$options.data().dialogForm
      setTimeout(() => {
        this.$refs.dialogForm.clearValidate()
        setTimeout(() => {
          this.dialogForm.loginType = [1, 2]
          console.log(this.dialogForm.loginType);
        }, 10)
      }, 10)
      this.dialogtitle = '添加用户'
    },
    updateType(index) {
      const self = this
      this.$confirm(
        `确定${index === 1 ? '启用' : index === 2 ? '禁用' : '删除'
        }选中的数据?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: 'bottom_all_two',
          confirmButtonClass: 'bottom_all',
          type: 'warning'
        }
      )
        .then(() => {
          switch (index) {
            case 1: {
              const params = {
                status: 1,
                type: 'update_enable'
              }
              self.handleData(params)
              return
            }
            case 2: {
              const params = {
                status: 0,
                type: 'update_enable'
              }
              self.handleData(params)
              return
            }
            case 3: {
              const params = {
                status: 0,
                type: 'update_status'
              }
              self.handleData(params)
              return
            }
            default:
              break
          }
        })
        .catch(() => { })
    },
    handleData(data) {
      const params = {
        ...data,
        ids: this.SelectionTableData
      }
      updateOrDelete(params).then(() => {
        this.initData()
        this.$message({
          message: '操作成功！',
          type: 'success'
        })
      })
    },
    update(low) {
      /**
       * @Description: 修改用户
       * @Param:
       * @Author: wangwangwang
       */
      let data = JSON.parse(JSON.stringify(low))
      this.dialogVisible = true
      this.dialogtitle = '修改用户'
      this.dialogForm = JSON.parse(JSON.stringify(data))
      this.dialogForm.sex = Number(data.sex)
      this.dialogForm.loginType = data.loginType === 3 ? [1, 2] : [data.loginType]
      this.dialogForm.createChindAccount = Number(
        data.createChindAccount
      )
      let allOrganization = formatOrganization(this.allOrgangeData, data.organizationId);
      this.allOrganizationArr = allOrganization
      console.log(this.allOrganizationArr);
      if (allOrganization.length > 0) {
        this.dialogForm.organizationIdarr = allOrganization.map(item => item.name).join('-');
      } else {
        this.dialogForm.organizationIdarr = '请选择组织';
      }
      if (low.stationId) {
        this.getrankoptions(low.stationId);
      }
      setTimeout(() => {
        this.$refs.dialogForm.clearValidate()
      }, 10)
    },
    handleSelectionChange(val) {
      const data = []
      this.sortIds = []
      for (const i in val) {
        data.push(val[i].id)
        this.sortIds.push({ id: val[i].id, sortNum: val[i].sortNum })
      }
      this.SelectionTableData = data
    },
    sureSubmit() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          const params = {
            ...this.dialogForm,
            loginType: this.dialogForm.loginType.length === 2 ? 3 : this.dialogForm.loginType[0],
          }
          saveOrUpdate(params).then((res) => {
            if (res.code === 1001) {
              this.$message({
                message: '操作成功！',
                type: 'success'
              })
              this.dialogVisible = false
              this.resefrom()
              this.initData()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleCheckChange(e) {
      this.mineStatusValue = e.label
      this.mineStatus = e.label
    }
  },

}
</script>
<style lang="scss" scoped>
.dictionary-container {
  .el-input,
  .el-cascader,
  .el-select {
    width: 220px;
  }
  .el-link {
    i {
      font-size: 14px;
      color: $bg_color;
    }
  }
  .el-link:hover {
    color: $bg_color;
  }
  .header_right {
    @include discen_al;
    padding: 0 20px;
    justify-content: space-between;
    .title {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
    }
  }
  font-size: $font_size;
  .el-main {
    padding: 0;
  }
  .el-main::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }
  .el-main::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }
  .el-main::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 10px;
  }
  .el-main::-webkit-scrollbar-thumb:hover {
    background: #333;
  }
  .el-main::-webkit-scrollbar-corner {
    background: #179a16;
  }
  .search {
    padding: 0 20px;
    // display: flex;
    // align-items: center;
  }
  // .card {
  // }
  .card_nav {
    padding: 0 20px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .card_info {
    padding: 0 20px;
  }
  .card_bottom {
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    .card_bottom_left {
      display: flex;
      align-items: center;
      font-size: $font_size;
    }
  }
}
</style>
